<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>并发数据统计-结果页</title>
    <script src="/static/js/jquery-3.5.1.js"></script>
    <script src="/static/js/echarts.js"></script>

    <style>
        .fixed {
            position: relative;
            background: #ccc;
            height: 30px;
        }

        .scroll_layer {
            height: 600px;
            overflow-y: scroll;
            display: none;
            /*overflow: hidden;*/
        }
    </style>

</head>
<body>
<div style="margin-left: 100px">
    <h3 style="font-weight: normal">并发数据统计</h3>
    <hr>
    <div>
        <form id="addForm" action="/gadget/exportExcel" method="post" enctype="multipart/form-data"
              onsubmit="return exportExcel()"
        >
            <div style="margin-top: 30px">
                <span style="margin-right: 40px">并发时间间隔</span>

                <span style="margin-right: 40px">
            <select id="intervalTime" name="intervalTime" style="width: 180px;border-radius: 4px">
<!--                下拉框多选采用分钟作为value，最小单位是1分钟，1h==60min-->
                                  <option value="1">1分钟</option>
                                  <option value="2">2分钟</option>
                                  <option value="5">5分钟</option>
                                  <option value="10">10分钟</option>
                                  <option value="15">15分钟</option>
                                  <option value="30">30分钟</option>
                                  <option value="60">1小时</option>
                                  <option value="120">2小时</option>
                                  <option value="180">3小时</option>
                                  <option value="240">4小时</option>

                              </select>
        </span>
                <span><input id="skipFirstLine" type="checkbox" name="skipFirstLine" value="true">跳过首行</span>
            </div>

            <div style="margin-top: 30px">

                <span style="margin-right: 40px">数据文件上传</span><input type="file" name="file" id="fileName"
                                                                     value="选择文件"/>
            </div>

            <br>
            <button type="button"
                    style="background-color: deepskyblue;width: 150px;height: 30px;color: white;border: 0px;border-radius: 4px"
                    onclick="PostFile()">开始统计
            </button>
            <button type="submit"
                    style="background-color: deepskyblue;width: 150px;height: 30px;color: white;border: 0px;border-radius: 4px;"
                    onclick="exportExcel2()">
                导出
            </button>
        </form>


    </div>
    <hr>


    <div style="margin-top: 30px;width: 1700px">
        <div class="scroll_layer" id="tableShow" style="float: left">
            <table id="showTable" border="1" bordercolor="#A9A9A9" cellspacing="0"
                   style="width:400PX; border-collapse:collapse">
                <tr>
                    <td class="fixed">日期</td>
                    <td class="fixed">时间</td>
                    <td class="fixed">并发量</td>
                </tr>

            </table>
        </div>
        <div id="showPicture" style="width:1000PX;height:500px;margin-left:80px;float: left">

        </div>
        <div id="showMax" style="float:left;margin-left: 150px; color: red;display: none">
            <span>最高并发:<span id="maxValue"></span>,</span><span>发生时间段为<span id="maxTime"></span></span>
        </div>
    </div>


</div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('showPicture'));

    // 指定图表的配置项和数据
    let option = {
        title: {
            text: '并发示例图'
        },
        tooltip: {},
        legend: {
            data: ['并发']
        },
        grid: {
            y2: 160,
        },
        xAxis: {
            data: [],
            axisLabel: {
                interval: 0,//横坐标全部显示
                rotate: -90,//-90度角显示
            }
        },
        yAxis: {
            type: 'value',

        },
        series: [{
            name: '并发',
            type: 'line',
            symbol: 'circle',//折线点设置为实心点
            symbolSize: 8,
            itemStyle: {
                normal: {
                    color: 'deepskyblue',
                    lineStyle: {
                        color: 'deepskyblue',
                    }
                }
            },
            data: []
        }]
    };

    //提交excel
    function PostFile() {

        let file1 = $("input[name='file']").val();//文件内容


        if (file1 == "") {
            alert("请添加文件！");
            return false;
        }
        let fileType = file1.substring(file1.lastIndexOf("."), file1.length)//获取文件的名字，以便进行文件类型的检验
        fileType = fileType.toLowerCase();
        if (fileType != '.xls' & fileType != '.xlsx') {
            alert("请导入Excel类型文件！")
            return false;
        }

        let formData = new FormData();//需要实例化一个FormData来进行文件上传
        formData.append("file", $('#fileName')[0].files[0]);
        formData.append("intervalTime", $("#intervalTime").val())
        formData.append("skipFirstLine", $("#skipFirstLine").prop('checked'))

        //先将原先数据表进行一个隐藏
        document.getElementById("showMax").style.display = "none";
        document.getElementById("tableShow").style.display = "none";
        document.getElementById("showPicture").style.display = "none";


        // 后台打印折线图的相关信息
        $.ajax({
            type: "post",
            url: "uploadToFile",
            data: formData,
            processData: false,
            contentType: false,

            success: function (data) {
                console.log(data)
                if (data.code == 1) {

                    if (Object.keys(data.data.problemLines).length != 0) {
                        let message = "存在" + Object.keys(data.data.problemLines).length + "条脏数据，可能影响结果！\n";

                        //遍历map对象
                        for (let key in data.data.problemLines) {
                            message = message + "行数：" + key + " " + "'" + data.data.problemLines[key] + "'\n";
                        }


                        alert("解析失败！" + message)
                    } else {
                        if (data.data.exportInfoList==null){
                            alert("解析失败！可解析内容为空！")
                        }else {
                            alert("解析失败!" + data.data.message)
                        }

                    }
                    return false;
                }


                console.log(data.data)

                //ajax请求成功进行折线图的描画
                //获取data中的键的数组
                let arrKey = new Array()

                //获取data中的value（并发量的值）
                let arrValue = new Array()
                for (let i in data.data.exportInfoList) {
                    arrKey.push(data.data.exportInfoList[i].date + " " + data.data.exportInfoList[i].timeQuantum)
                    arrValue.push(data.data.exportInfoList[i].concurrentQuantity)
                }
                // console.log(arrKey)
                // console.log(arrValue)

                option.xAxis.data = arrKey
                option.series[0].data = arrValue
                console.log(option)
                myChart.setOption(option);


                //    显示最值,
                //    先将包含最值信息的div的style设置为可见
                document.getElementById("showMax").style.display = "block";

                //添加最值信息
                $('#maxValue').text(arrValue[arrValue.indexOf(Math.max.apply(Math, arrValue))]);
                $('#maxTime').text(arrKey[arrValue.indexOf(Math.max.apply(Math, arrValue))]);

                //显示折线图
                document.getElementById("showPicture").style.display = "block";
                //    显示表格
                document.getElementById("tableShow").style.display = "block";

                // 进行表格的渲染
                let item;
                $("#showTable  tr:not(:first)").html("");
                $.each(data.data.exportInfoList, function (i, result) {
                    item = "<tr><td>" + result['date'] + "</td><td>" + result['timeQuantum'] + "</td><td>" + result['concurrentQuantity'] + "</td></tr>";
                    $('#showTable').append(item);
                })

                if (Object.keys(data.data.problemLines).length != 0) {
                    let message = "存在" + Object.keys(data.data.problemLines).length + "条脏数据，可能影响结果！\r\n";

                    //遍历map对象
                    for (let key in data.data.problemLines) {
                        message = message + "行数： " + +key + "  " + data.data.problemLines[key]+"\r\n";
                    }


                    alert("解析成功!   " + message)
                } else {
                    alert("解析成功!无脏数据")
                }


            },

        })


    }

    //导出excel
    function exportExcel() {
        let file1 = $("input[name='file']").val();//文件内容


        if (file1 == "") {
            alert("请添加文件！");
            return false;
        }
        let fileType = file1.substring(file1.lastIndexOf("."), file1.length)//获取文件的名字，以便进行文件类型的检验
        fileType = fileType.toLowerCase();
        if (fileType != '.xls' & fileType != '.xlsx') {
            alert("请导入Excel类型文件！")
            return false;
        }

        return true;

    }


    //导出excel新方法
    function exportExcel2() {

        let formData = new FormData();//需要实例化一个FormData来进行文件上传
        formData.append("file", $('#fileName')[0].files[0]);
        formData.append("intervalTime", $("#intervalTime").val())
        formData.append("skipFirstLine", $("#skipFirstLine").prop('checked'))
        $.ajax({
            type: "post",
            url: "exportExcel",
            data: formData,
            processData: false,
            contentType: false,

            success: function (data) {
                let file1 = $("input[name='file']").val();//文件内容


                if (file1 == "") {
                    // alert("请添加文件！");
                    return false;
                }
                let fileType = file1.substring(file1.lastIndexOf("."), file1.length)//获取文件的名字，以便进行文件类型的检验
                fileType = fileType.toLowerCase();
                if (fileType != '.xls' & fileType != '.xlsx') {
                    // alert("请导入Excel类型文件！")
                    return false;
                }
                console.log(data)
                alert("下载成功!若无文件生成，请先检查是否有可解析内容！")
            },

        })

        return true;

    }




</script>

</body>
</html>